<template>
  <div ref="screenFull" style="width: 100%">
    <el-card title="代码编辑器" :show-head="true">
      <div
        style="
          display: flex;
          width: 100%;
          margin-right: 20px;
          margin-bottom: 10px;
        "
      >
        <!-- <el-select
          v-model="valueTheme"
          :value-key="'valueTheme'"
          placeholder="选择主题"
          style="width: 130px; margin-right: 20px"
          :filterable="true"
          :clearable="true"
          @change="selectTheme"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in listTheme"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select> -->

        <!-- <el-select
          v-model="valueCodeLang"
          :value-key="'valueCodeLang'"
          placeholder="选择语言"
          style="width: 120px; margin-right: 20px"
          :filterable="true"
          @change="selectLang"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in listCodeLang"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>

        <el-select
          v-model="valueFontSize"
          :value-key="'valueFontSize'"
          placeholder="字体大小"
          style="width: 100px; margin-right: 20px"
          :filterable="true"
          @change="selectFontSize"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in listFontSize"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select> -->
        <!-- <el-button
          theme="primary"
          icon="script-file"
          class="mr10"
          @click="copyCode()"
        >
          复制</el-button
        >-->
        <!-- <el-button
          theme="primary"
          icon="eye"
          class="mr10"
          @click="formatCode()"
        >
          美化</el-button
        >  -->
        <el-button
          theme="primary"
          :icon="fullScreen ? 'un-full-screen' : 'full-screen'"
          class="mr10"
          @click="screen()"
        >
          {{ fullScreen ? "退出全屏" : "全屏" }}</el-button
        >
        <slot name="domainButton" />
      </div>
      <div
        ref="codeBox"
        style="display: flex; overflow: auto; position: relative"
      >
        <editor
          ref="aceEditor"
          v-model="content"
          @init="editorInit"
          width="100%"
          :height="boxHeight"
          :lang="lang"
          :theme="theme"
          :options="{
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            tabSize: 4,
            fontSize: fontSize,
            readOnly: readOnly, //设置是否只读
            showPrintMargin: false, //去除编辑器里的竖线
          }"
        ></editor>
        <div
          v-if="scale"
          ref="containerDom"
          @mousedown.stop.prevent="drag"
          class="dragSvg"
        >
          <svg
            t="1722828989390"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3536"
            width="25"
            height="25"
          >
            <path
              d="M247.741935 197.532903l6.606452 23.783226h524.552258c13.212903 0 23.783226 10.570323 23.783226 23.783226v524.552258c0 13.212903-10.570323 23.783226-23.783226 23.783226H254.348387c-13.212903 0-23.783226-10.570323-23.783226-23.783226V245.099355c0-13.212903 10.570323-23.783226 23.783226-23.783226l6.606452-23.783226-6.606452-23.783226c-39.63871 0-71.349677 31.710968-71.349677 71.349678v524.552258c0 39.63871 31.710968 71.349677 71.349677 71.349677h524.552258c39.63871 0 71.349677-31.710968 71.349678-71.349677V245.099355c0-39.63871-31.710968-71.349677-71.349678-71.349678H254.348387v23.783226h-6.606452z"
              p-id="3537"
              fill="#bfbfbf"
            ></path>
            <path
              d="M383.174194 774.276129l-69.367742-1.32129c-13.212903 0-25.765161-5.945806-34.353549-15.855484-8.588387-9.909677-13.212903-23.122581-11.891613-36.335484l6.606452-70.028387c1.32129-13.212903 12.552258-22.461935 25.765161-21.80129 13.212903 1.32129 22.461935 12.552258 21.801291 25.765161l-6.606452 70.028387 70.028387 1.32129c13.212903 0 23.783226 11.230968 23.122581 24.443871-0.660645 13.873548-11.891613 24.443871-25.104516 23.783226z"
              p-id="3538"
              fill="#bfbfbf"
            ></path>
            <path
              d="M660.645161 260.294194l70.689033 1.32129c13.212903 0 25.765161 5.945806 34.353548 15.855484 8.588387 9.909677 13.212903 23.122581 11.891613 36.335484l-6.606452 68.707096c-1.32129 13.212903-13.212903 22.461935-25.765161 21.140646-13.212903-1.32129-22.461935-13.212903-21.140645-25.765162l6.606451-68.707097-70.689032-1.32129c-13.212903 0-23.783226-11.230968-23.122581-24.443871 0-13.212903 10.570323-23.122581 23.783226-23.12258z"
              p-id="3539"
              fill="#bfbfbf"
            ></path>
            <path
              d="M334.947097 742.565161L430.08 647.432258c9.249032-9.249032 9.249032-24.443871 0-33.692903-9.249032-9.249032-24.443871-9.249032-33.692903 0l-95.132903 95.132903c-9.249032 9.249032-9.249032 24.443871 0 33.692903 9.249032 9.249032 24.443871 9.249032 33.692903 0"
              p-id="3540"
              fill="#bfbfbf"
            ></path>
            <path
              d="M650.074839 420.830968l95.132903-95.132903c9.249032-9.249032 9.249032-24.443871 0-33.692904-9.249032-9.249032-24.443871-9.249032-33.692903 0L616.381935 387.138065c-9.249032 9.249032-9.249032 24.443871 0 33.692903 9.249032 9.249032 24.443871 9.249032 33.692904 0"
              p-id="3541"
              fill="#bfbfbf"
            ></path>
          </svg>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {
    editor: require("vue2-ace-editor"),
  },
  props: {
    scale: {
      type: Boolean,
      default: true,
    },
    ednitWidth: {
      type: String,
      default: "100%",
    },
    // 编辑框高度
    editorHight: {
      type: Number,
      default: 300,
    },
    // 是否只读
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 要展示的代码
    codeData: {
      type: String,
      default: "",
    },
    // 默认的主题
    valueTheme: {
      type: String,
      default: "dracula",
    },
    // 默认的语言
    valueCodeLang: {
      type: String,
      default: "sql",
    },
    // 默认的语言
    valueFontSize: {
      type: Number,
      default: 16,
    },
  },
  data() {
    return {
      listTheme: [
        "clouds",
        "clouds_midnight",
        "dracula",
        "chrome",
        "chaos",
        "xcode",
        "monokai",
        "ambiance",
        "dreamweaver",
        "eclipse",
        "github",
        "idle_fingers",
      ],
      listCodeLang: ["pgsql", "sqlserver", "mysql", "sql", "groovy"],

      listFontSize: [10, 12, 14, 16, 20],

      content: "",
      theme: "",
      lang: "",
      fontSize: 12,
      tmpFontSize: 12,
      fullScreen: false,
      unFullEditorHight: 0, // 非全屏状态下的编辑器高度
      appendToBody: true,
      startWidth: 0,
      startHeight: 0,
      startX: 0,
      startY: 0,
      boxWidth: 0,
      boxHeight: 0,
      dragging: false,
    };
  },
  created() {
    // 初始化主题、语言、大小
    this.theme = this.valueTheme;
    this.lang = this.valueCodeLang;
    this.fontSize = this.tmpFontSize = this.valueFontSize;
    this.boxWidth = this.$props.ednitWidth ? this.$props.ednitWidth : "100%";
    this.boxHeight = this.$props.editorHight ? this.$props.editorHight : 300;
  },
  mounted() {
    // // 初始化编辑器
    this.editorInit();
    this.unFullEditorHight = this.editorHight; // 缓存浏览器高度
    // 若传输代码，则展示代码
    if (this.codeData) {
      this.$refs.aceEditor.editor.setValue(this.codeData);
    }
    // ESC按键事件无法监听，监听窗口变化
    window.onresize = () => {
      this.fullScreen = this.checkFull();
    };
  },

  methods: {
    drag(e) {
      e.preventDefault();
      this.dragging = true;
      const codeBoxEl = this.$refs.codeBox;
      this.startWidth = codeBoxEl.offsetWidth;
      this.startHeight = codeBoxEl.offsetHeight;
      this.startX = e.clientX;
      this.startY = e.clientY;
      document.addEventListener("mousemove", this.doDrag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    doDrag(event) {
      if (this.dragging) {
        this.boxWidth = this.startWidth + event.clientX - this.startX;
        this.boxHeight = this.startHeight + event.clientY - this.startY;
        if (this.boxHeight < 150) {
          this.boxHeight = 150;
        }
      }
    },
    stopDrag() {
      this.dragging = false;
      document.removeEventListener("mousemove", this.doDrag);
      document.removeEventListener("mouseup", this.stopDrag);
    },
    selectTheme(newValue) {
      if (newValue) {
        this.theme = newValue;
      }
    },
    selectLang(newValue) {
      if (newValue) {
        this.lang = newValue;
      }
    },
    selectFontSize(newValue) {
      if (newValue) {
        this.fontSize = newValue;
        this.tmpFontSize = newValue;
      }
    },
    editorInit() {
      // 初始化
      require("brace/ext/language_tools");
      require("brace/ext/beautify");
      require("brace/ext/error_marker");
      require("brace/ext/searchbox");
      require("brace/ext/split");

      // 循坏加载语言，通过点击按钮切换
      for (let s = 0; s < this.listCodeLang.length; s++) {
        require("brace/snippets/" + this.listCodeLang[s]);
      }
      for (let j = 0; j < this.listCodeLang.length; j++) {
        require("brace/mode/" + this.listCodeLang[j]);
      }

      // 循坏加载主题，通过点击按钮切换
      for (let i = 0; i < this.listTheme.length; i++) {
        require("brace/theme/" + this.listTheme[i]);
      }
    },

    copyCode() {
      const code = this.$refs.aceEditor.editor.getValue();
      let message, theme;
      // 复制到剪切板
      if (navigator.clipboard) {
        navigator.clipboard.writeText(code);

        message = "复制成功";
        theme = "success";
      } else {
        message = "您的浏览器不支持自动复制，请手动复制";
        theme = "danger";
      }

      this.$message({
        message,
        theme,
      });
    },

    formatCode() {
      const code = this.$refs.aceEditor.editor.getValue();
      if (code !== "") {
        const string = JSON.stringify(JSON.parse(code), null, 2);
        this.$refs.aceEditor.editor.setValue(string);
      }
    },

    getValue() {
      
    },

    checkFull() {
      // 用来监听编辑器大小是否变化
      // 火狐浏览器
      const isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        // 谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;

      if (!isFull) {
        // false时 ：非全屏
        this.editorHight = this.unFullEditorHight;
      }

      return !!isFull;
    },
    screen() {
      this.valueFontSize = this.fontSize = 12; // 大小变更后初始化文字大小（不定义也会变为12 组件bug）
      const element = this.$refs.screenFull;

      if (this.fullScreen) {
        this.appendToBody = true;
        this.editorHight = this.unFullEditorHight;
        // 关闭全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        this.appendToBody = false;
        // 全屏
        this.editorHight = window.screen.availHeight - 50;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }

      this.fullScreen = !this.fullScreen;

      // setTimeout(() => {
      //     this.fontSize = this.tmpFontSize
      // }, 200)
    },
  },
};
</script>

<style lang="scss" scoped>
.dragSvg {
  position: absolute;
  z-index: 999;
  bottom: 0;
  right: 0;

  .icon {
    cursor: move;
    transform: rotate(90deg);
  }
}

::v-deep .el-card {
  transition: null;
}
</style>
